<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .container {
            width: 800px;
            height: 1700px;
            margin: 30px auto;
            font-size:18px;
            background:url(./images/denglu.jpg) no-repeat;

        }
        h1{
            margin: 50px;
        }

        p {
            margin-top: 20px;
            margin-left: 38px;
        }

        input {
            margin-right: 20px;
        }

        .title {
            text-align: center;
        }

        .submit {
            text-align: center;
        }

        #submit {
            background-color: rgb(216, 53, 53);
            width: 200px;
            font-size:20px;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="title">
            <h1>注册登录页面</h1>
        </div>
        <div class="content">
            <form action="" onsubmit="return false">
                <p>
                    <label for="name">用户名：</label>
                    <input type="text" id="name" onblur="nameCheck()">
                    <span class="name">3-4位中文组成</span>
                </p>
                <p>
                    <label for="sex">性别：</label>
                    <input type="text" id="sex" onblur="sexCheck()">
                    <span class="sex">请输入性别</span>
                </p>
                <p>
                    <label for="tel">手机号码：</label>
                    <input type="text" id="tel" onblur="telCheck()">
                    <span class="tel">请输入11位正确的手机号</span>
                </p>
                <p>
                    <label for="email">邮箱：</label>
                    <input type="email" id="email" onblur="emailCheck()">
                    <span class="email">123456@qq.com</span>
                </p>
                <p>
                    <label for="card">身份证号码：</label>
                    <input type="card" id="card" onblur="isCardNo()">
                    <span class="card">请输入正确的身份证号码</span>
                </p>
                <p>
                    <label class="left">学号验证：</label>
                    <input id="sn" type="text" class="in" onblur="snBtn();" />
                    <span id="snText">请输入学生号 </span>
                </p>
                <p>
                    <label for="pwd">密码：</label>
                    <input type="password" id="pwd" onblur="pwdCheck()">
                    <span class="pwd">请输入6-12位密码</span>
                </p>
                <p>
                    <label for="pwd1">密码确认：</label>
                    <input type="password" id="pwd1" onblur="pwdSure()">
                    <span class="pwd1">请再次输入密码</span>
                </p>
                <p class="submit">
                    <input type="button" onclick="sub()" id="submit" value="提交">
                </p>
            </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        function sub() {
            var name = document.getElementById("name").value;
            if(nameCheck() && sexCheck() && telCheck() && emailCheck() && pwdCheck() && pwdSure()){
                localStorage.setItem("name",name)|location.replace("./index.html");
            }else{
                alert('注册错误，有输入错误');
            }
        }
        //验证姓名字段
        function nameCheck(str) {
            let reg = /^[\u4e00-\u9fa5]{2,10}$/;
            let name = $("#name").val();
            if (!reg.test(name) || name=='') {
                $(".name").html("<span class='red'>请输入3~4位中文</span>");
                return false;
            }else{
                $(".name").text('√');
                return true;
            }
        }
        //验证性别字段
        function sexCheck(str) {
            let reg = /[/^男$|女&/]/;
            let sex = $("#sex").val();
            if(!reg.test(sex) || sex==''){
                $(".sex").html("<span class='red'>从男或女中选择输入</span>")
                return false;
            }else{
                $(".sex").text('√');
                return true;
            }
        }
        //验证手机号码
        function telCheck(str) {
            let reg = /^[1][0-9]{10}$/;
            let tel = $("#tel").val();
            if(!reg.test(tel) || tel==''){
                $(".tel").html("<span class='red'>请输入正确的手机号码,</span>")
                return false;
            }else{
                $(".tel").text('√');
                return true;
            }
        }
        //验证邮箱字段
        function emailCheck(str) {
            let reg = /^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
            let email = $("#email").val();
            if(!reg.test(email) || email==''){
                $(".email").html("<span class='red'>请输入正确的邮箱</span>")
                return false;
            }else{
                $(".email").text('√');
                return true;
            }
        }
        // 验证身份证号码
        function isCardNo(str){
            let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            let card = $("#card").val();
            if(!reg.test(card) || card==''){
                $(".card").html("<span class='red'>身份证输入不合法</span>")
                return false;
            }else{
                $(".card").text('√');
                return true;
            }
        }

        // 学号验证
        function snBtn(){
            var sn=document.getElementById("sn").value;
            var snReg=/^[0-9]{11}$/;
            var snText=document.getElementById("snText");
            if(snReg.test(sn)){
                snText.innerHTML="√";
                return true;
            }else{
                snText.innerHTML="输入不正确!";
            }
            return false;
        }

        //验证密码字段
        function pwdCheck(str) {
            let reg = /^[\s\S]{6,12}/;
            let pwd = $("#pwd").val();
            if(!reg.test(pwd) || pwd==''){
                $(".pwd").html("<span class='red'>请输入6-12位密码</span>")
                return false;
            }else{
                $(".pwd").text('√');
                return true;
            }
        }
        //确认密码
        function pwdSure() {
            if ($("#pwd").val() === $("#pwd1").val()) {
                $(".pwd1").text("√");
                return true;
            } else {
                $(".pwd1").html("<span class='red'>两次密码输入不一致</span>")
                return false;
            }
        }
    </script>
</body>

</html>

